<template>
  <a-modal
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    :title="title"
    :visible="visible"
    :width="1200"
    @cancel="handleCancel"
  >
    <a-form :form="form" @submit="handleSubmit">
      <a-form-item
        :key="k"
        :label="index === 0 ? 'Passengers' : ''"
        :required="false"
        v-bind="index === 0 ? formItemLayout : formItemLayoutWithOutLabel"
        v-for="(k, index) in form.getFieldValue('keys')"
      >
        <a-input
          placeholder="passenger name"
          style="width: 60%; margin-right: 8px"
          v-decorator="[
            `names[${k}]`,
            {
              validateTrigger: ['change', 'blur'],
              rules: [
                {
                  required: true,
                  whitespace: true,
                  message: 'Please input passenger\'s name or delete this field.',
                },
              ],
            },
          ]"
        />
        <a-icon
          :disabled="form.getFieldValue('keys').length === 1"
          @click="() => remove(k)"
          class="dynamic-delete-button"
          type="minus-circle-o"
          v-if="form.getFieldValue('keys').length > 1"
        />
      </a-form-item>
      <a-form-item v-bind="formItemLayoutWithOutLabel">
        <a-button @click="add" style="width: 60%" type="dashed">
          <a-icon type="plus"/>
          Add field
        </a-button>
      </a-form-item>
      <a-form-item v-bind="formItemLayoutWithOutLabel">
        <a-button html-type="submit" type="primary">
          Submit
        </a-button>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>

let id = 0
export default {
  data () {
    return {
      confirmLoading: false,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 }
        }
      },
      formItemLayoutWithOutLabel: {
        wrapperCol: {
          xs: { span: 24, offset: 0 },
          sm: { span: 20, offset: 4 }
        }
      },
      title: '表单',
      visible: false
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this, { name: 'dynamic_form_item' })
    this.form.getFieldDecorator('keys', { initialValue: [], preserve: true })
  },
  methods: {
    init () {
      this.visible = true
      this.form.resetFields()
    },
    remove (k) {
      const { form } = this
      // can use data-binding to get
      const keys = form.getFieldValue('keys')
      // We need at least one passenger
      if (keys.length === 1) {
        return
      }

      // can use data-binding to set
      form.setFieldsValue({
        keys: keys.filter(key => key !== k)
      })
    },

    add () {
      const { form } = this
      // can use data-binding to get
      const keys = form.getFieldValue('keys')
      const nextKeys = keys.concat(id++)
      // can use data-binding to set
      // important! notify form to detect changes
      form.setFieldsValue({
        keys: nextKeys
      })
    },

    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
        }
      })
    },
    // close
    handleCancel () {
      this.visible = false
    }
  }
}
</script>
<style>
	.dynamic-delete-button {
		cursor: pointer;
		position: relative;
		top: 4px;
		font-size: 24px;
		color: #999;
		transition: all 0.3s;
	}

	.dynamic-delete-button:hover {
		color: #777;
	}

	.dynamic-delete-button[disabled] {
		cursor: not-allowed;
		opacity: 0.5;
	}
</style>
